<template>
	<div id="uploadhold" class="upload-holder mask" v-show="dragin" @dragleave="uploaddragleave">
		<div class="upload-wnd col" v-show="dropon">
	    	<div class="upload-title row">
	    		<img class="upload-item-img" src="resource/images/upload.png" />
	    		<div class="row"><h3>上传</h3></div>
	    	</div>
	    	<div class="upload-content" >
	    		正在上传...<br />
	    		已完成{{completedCount}}个文件
	    	</div>
	    	<div class="upload-footer row">
	    		共{{uploadCount}}个文件
	    	</div>
		</div>
	</div>
</template>

<script>
	{
		name:"uploader",
		data:function(){return{
			_uploader:{},			
			dragin:false,
			dropon:false,
			completedCount:0,
			uploadCount:0
		}},
		methods:{			
			uploaddragleave:function(){
				this.dragin = false
				this.dropon = false
			},
			sendFiles:function (entry) {
				var that = this
				if(entry.isDirectory) {
					var reader = entry.createReader()
					reader.readEntries(function(entries) {						
						entries.forEach(function(subentry) {							
							that.sendFiles(subentry)						
						})
					})
				}else{
					entry.file(function(file){
						
						var fd = new FormData()
						fd.append('file',file)
						fd.append('fullpath',entry.fullPath) 
						xhr = new XMLHttpRequest()
			            xhr.open("post", 'php/upload.php', true)
			            xhr.onload = function(e){
			            		
			            	that.completedCount += 1			            	
			            	if(that.completedCount == that.uploadCount){
			            		that.dragin = false
								that.dropon = false
								that.completedCount = 0
								that.uploadCount = 0
								that.w.files.reload()
			            	}
			            }			            
			            xhr.send(fd)
					})
				}
			},
			presend:function (entry) {
				var that = this
				if(entry.isDirectory) {
					var reader = entry.createReader()
					reader.readEntries(function(entries) {						
						entries.forEach(function(subentry) {							
							that.presend(subentry)						
						})
					})
				}else{
					
						that.uploadCount += 1						
					
				}
			}
		},
		created:function(){
			var that = this
			document.body.addEventListener('dragover',function(e){
				e.preventDefault()
				that.dragin = true
				that.dropon = false
				that.uploadlist = []
			})
			document.body.addEventListener('drop',function(e){
				e.preventDefault()
				that.dragin = true
				that.dropon = true
				var items = e.dataTransfer.items
				
				for(var i = 0; i < items.length; i++) {				
					that.presend(items[i].webkitGetAsEntry())
				}
				for(var i = 0; i < items.length; i++) {				
					that.sendFiles(items[i].webkitGetAsEntry())
				}
				sounds.play('upload')
			})
		}
		
	}
</script>

<style>
	
.upload-holder{
	width:100%; 
	height:100%;
	position:fixed; 
	top :0px;
	background-color:rgba(0,0,0,0.5);	
	text-align:center;
	display: flex;
	justify-content: center;
	align-content: center;	
	z-index: 10000;
	
}
.upload-wnd{		
	width: 300px;
	height: 200px;	
	z-index: 1000;
	background-color: #F5F5F5;
	opacity: 1;
	display: flex;
	padding: 5px;	
}
.upload-title{
	height: 40px;
	border-bottom: #D2D7DC thin solid;
}
.upload-title>button{
	width:100px;
	border-radius: 3px;
}
.upload-content{
	font-size: 12px;
	background-color: white;
	border-radius: 5px;
}
.upload-item-img{
	margin: 5px;
	width: 20px;
	height: 20px;
}
.upload-item{
	margin: 2px;	
	height: 40px;
	border-bottom: #D2D7DC thin solid;
}
.upload-item-prop{
	text-align: left;
	justify-content: flex-start;
	margin-left: 5px;	
}
.margin-right-auto{
	margin-right: auto;
}
.sm{
	width: 20px;
	height: 20px;
}
.upload-footer{
	border-top:#D2D7DC solid thin ;
	height: 40px;
}

.upload-progress{	
	width: 200px;
	height: 30px;
	border: #000000;	
}
</style>